﻿@model WebInstagram.Models.Photo

@{
    ViewBag.Title = "Details";
}

<style type="text/css">
    .cLink {
        display: block;
        font-weight: 700;
        color: #3f729b;
    }
</style>
<script>
    function showRef(ref) {
        $(ref).show();
    }
    function hideRef(ref) {
        $(ref).hide();
    }
</script>
<div>
    <hr />
    <div class="row">
        <div class="col-md-2">

        </div>
        <div class="col-md-5">
            <img src="data:image/jpg;base64,@(Convert.ToBase64String(Model.Image))" title="@Model.Title" width="450" height="500" />
            <div>
                <span style="font-weight:bold">@Html.DisplayNameFor(model => model.Created): </span>
                @Html.DisplayFor(model => model.Created)
            </div>
            @if (ViewBag.LoggedUser == ViewBag.UserName)
            {
                <p><a class="btn btn-default" href="~/Photo/Delete/@Model.Id">Delete photo &raquo;</a></p>
            }

        </div>
        <div class="col-md-5">
            <div style="background:#FEFEFE;border-bottom: 1px solid #ddd;padding:4px 7px 2px 4px">
                <a class="cLink" href="~/Home/Index/@Model.User">@Model.User</a>
                <h4>@Model.Title</h4>
            </div>
            <div style="height:400px; overflow:auto;background:#F8F8F8; padding:4px 7px 2px 4px">
                @foreach (var comment in Model.Comments)
                {
                    <div id="div@comment.Id" 
                         onmouseover="showRef('#ref@(comment.Id)');"
                         onmouseout="hideRef('#ref@(comment.Id)');">
                        @if (comment.User == ViewBag.LoggedUser)
                        { 
                            <a style="float:right;display:none" id='ref@(comment.Id)' href="~/Photo/DeleteComment?id=@comment.Id">x</a>
                        }
                        
                        <a class="cLink" href="~/Home/Index/@comment.User">@comment.User</a>
                        <span>@comment.Text</span>
                    </div>
                }
            </div>
            <div class="form-group">
                <form action="" method="post">
                    <div class="col-md-12">
                        <div style="display:inline; width:160px; margin-right:30px">
                            @Ajax.ActionLink("Like", "Like", new { photoID = Model.Id }, new AjaxOptions { UpdateTargetId = "likes" })
                            <span id="likes">@Model.Likes.Count</span>
                        </div>
                        <input type="text" name="commentText"
                               id="commentText" class="form-control"
                               placeholder="Leave comment..." style="width:80%;display:inline" />
                        <input type="submit" style="height:35px;"
                               id="btnLeaveComment" name="Post" />
                    </div>
                </form>

            </div>
        </div>

        <div class="col-md-2">

        </div>
    </div>
</div>
